<template>
  <div class="turn-ivr">
    <i class="wrap icon iconfont icon-ivr"  @click="openIvr" data-v-7moor></i>
    <el-dialog :close-on-click-modal="false" append-to-body modal-append-to-body lock-scroll top="10%" :title="$t('cti.TransferIVR')" :visible.sync="ivr" class="ivr">
      <template>
        <el-table :data="ivrData" stripe style="width: 100%" size="mini">
          <el-table-column prop="DisplayName" :label="$t('cti.IVRMenuName')"></el-table-column>
          <el-table-column :label="$t('public.operate')">
            <template scope="scope">
             <span>
                <el-button @click="phoneIvrMenu(scope.$index)" type="text">{{$t('cti.turnMenu')}}</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'TurnIvr',
    props: ['isCloseIvrMenu'],
    data () {
      return {
        ivr: false,
        ivrData: [] // table数据
      }
    },
    watch: {
      'isCloseIvrMenu': 'closeIvrMenu'
    },
    methods: {
      openIvr () { // IVR数据
        this.ivr = true
        this.$store.dispatch('getCache', { type: 'ivrMenu' }).then(resp => {
          // let ivrMenu = this.$store.state.cti.globalLet.ivrMenu
          let ivrMenu = resp || []
          let ivrData = []
          if (ivrMenu) {
            for (let key in ivrMenu) {
              ivrData.push({
                DisplayName: ivrMenu[key].DisplayName,
                Exten: ivrMenu[key].Exten
              })
            }
          }
          this.ivrData = ivrData
        })
      },
      phoneIvrMenu (index) {
        let num = this.ivrData[index].Exten
        let displayName = this.ivrData[index].DisplayName
        this.$store.dispatch('phoneToMenu', {exten: num, displayName: displayName}).then(resp => {
          if (resp && resp.Succeed) {
            this.ivr = false
          }
        })
      },
      closeIvrMenu () {
        if (!this.isCloseIvrMenu) { // 挂断通话的时候关掉弹窗
          this.ivr = false
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  div
    width 100%
    height 100%
  .wrap
    color $c-main
  .ivr
    text-align left
</style>
